<template>
  <div class="login-wrapper">
    <el-form class="login-form" ref="form" :model="formData" label-width="0">
      <el-form-item>
        <i class="iconfont icon-title"></i>
<!--        <h3>欢迎登录</h3>-->
      </el-form-item>
      <el-form-item>
        <el-input v-model="formData.username"  placeholder="请输入用户名">
          <template #prefix>
            <i class="iconfont">&#xe60f;</i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-input type="password" v-model="formData.password"  placeholder="请输入密码">
          <template #prefix>
            <i class="iconfont">&#xe654;</i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="login-btn" @click="login">点击进入</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {reactive} from "vue";
import router from "../router/router";
import {ElMessage} from 'element-plus';

export default {
  name: "Login",
  setup(){
    let formData = reactive({
      username:'',
      password:''
    });
    const login = ()=>{
      if(formData.username == 'admin' && formData.password == '123456'){
        router.push('index')
        ElMessage.success('登录成功');
      }else{
        ElMessage.error('用户名或密码错误');
      }
    }
    return {
      formData,
      login
    }
  }
}
</script>

<style lang="scss">
  .login-wrapper{
    width: 100%;
    height: 100vh;
    background: url("../assets/images/gyb.jpg")no-repeat 0 0/100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .login-form{
      padding: 30px;
      background: rgb(24 84 158 / 80%);
      border-radius: 5px;
      width: 460px;
      .icon-title{
        font-size: 275px;
        height: 50px;
        line-height: 50px;
        display: block;
        text-align: center;
        color: #e4f1fe;
        user-select: none;
      }
      h3{
        color: #fff;
        text-align: center;
      }
      .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
        margin-bottom: 30px;
      }
      .login-btn{
        width: 100%;
      }
    }
  }
</style>